<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ZenBreath - Guided Breathing Exercise for Relaxation and Stress Relief</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

    <meta name="description" content="Free guided breathing exercises for stress relief, relaxation, and mindfulness. Practice deep breathing techniques with visual guides and customizable sessions." />
    <meta name="keywords" content="breathing exercise, meditation, relaxation, stress relief, mindfulness, deep breathing, wellness, mental health" />
    <meta name="author" content="ZenBreath" />
    
    <!-- External Libraries -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" />

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            --warm-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --breathing-slow: cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        body {
            background: white;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 0;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            padding: 24px;
        }
        
        .gradient-text {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .breathing-circle {
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: var(--primary-gradient);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            transition: all 1s var(--breathing-slow);
            position: relative;
        }
        
        .breathing-circle::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
            z-index: -1;
            transition: all 1s var(--breathing-slow);
        }
        
        .breathing-circle.inhale {
            transform: scale(1.4);
        }
        
        .breathing-circle.inhale::before {
            transform: scale(1.2);
            opacity: 0.6;
        }
        
        .breathing-circle.exhale {
            transform: scale(0.8);
        }
        
        .breathing-circle.exhale::before {
            transform: scale(0.9);
            opacity: 0.3;
        }
        
        .breathing-circle.hold {
            transform: scale(1.4);
        }
        
        .progress-ring {
            width: 120px;
            height: 120px;
            transform: rotate(-90deg);
        }
        
        .progress-ring-circle {
            stroke: rgba(255, 255, 255, 0.2);
            stroke-width: 8;
            fill: transparent;
            r: 52;
            cx: 60;
            cy: 60;
        }
        
        .progress-ring-progress {
            stroke: #10b981;
            stroke-width: 8;
            fill: transparent;
            r: 52;
            cx: 60;
            cy: 60;
            stroke-dasharray: 326.73;
            stroke-dashoffset: 326.73;
            transition: stroke-dashoffset 0.3s ease;
            stroke-linecap: round;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.9);
            color: #4a5568;
            border: 1px solid #e2e8f0;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-2px);
        }
        
        .settings-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 24px;
            border: 1px solid #e2e8f0;
        }
        
        .select-custom {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .select-custom:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #667eea;
            font-family: 'Poppins', sans-serif;
        }
        
        .stat-label {
            font-size: 14px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 8px;
        }
        
        .phase-indicator {
            background: var(--secondary-gradient);
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 18px;
            display: inline-block;
            margin-bottom: 20px;
        }
        
        .reset-stats-btn {
            background: rgba(255, 255, 255, 0.9);
            color: #ef4444;
            border: 1px solid #e2e8f0;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
        }
        
        .reset-stats-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            transform: translateY(-2px);
        }

        /* Ad Container Styles with repositioning and content */
        .ad-container {
            position: fixed;
            width: 160px;
            height: 600px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
            overflow-y: auto;
            box-sizing: border-box;
            gap: 20px;
            /* Removed color: transparent and font-size: 0 to show images */
            pointer-events: auto;
        }

        .left-ad {
            top: 80px; /* below angel mascot */
            left: 20px;
        }

        .right-ad {
            top: 80px; /* same vertical as left ad */
            right: 20px;
        }

        .ad-container a {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .ad-container img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
        }

        .ad-container a:hover img {
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .breathing-circle {
                width: 220px;
                height: 220px;
                font-size: 20px;
            }
            
            .breathing-circle.inhale {
                transform: scale(1.3);
            }
            
            .settings-card {
                padding: 20px;
                margin: 16px;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ad-container {
                display: none !important; /* keep ads hidden on smaller devices */
            }
        }
        
        @media (max-width: 480px) {
            .breathing-circle {
                width: 180px;
                height: 180px;
                font-size: 18px;
            }
            
            .breathing-circle.inhale {
                transform: scale(1.2);
            }
            
            .btn-primary, .btn-secondary {
                padding: 12px 20px;
                font-size: 14px;
            }
        }

        /* Angel Mascot Container styles - fixed top-left */
        .angel-mascot-container {
            position: fixed;
            top: 18px;
            left: 10px;
            z-index: 10000;
            display: inline-block;
        }
        /* Anchor styling for angel mascot link */
        .angel-link {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-decoration: none;
        }

        /* Custom Slide Switch Styles */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            vertical-align: middle;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc;
            border-radius: 34px;
            transition: 0.4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            border-radius: 50%;
            transition: 0.4s;
        }

        input:checked + .slider {
            background-color: #667eea;
        }

        input:checked + .slider:before {
            transform: translateX(24px);
        }
    </style>
</head>
<body>

    <!-- Angel Mascot with hyperlink -->
    <div class="angel-mascot-container" aria-label="Home link angel mascot">
      <a href="..\index.html" class="angel-link" tabindex="0" aria-label="Go to Home Page">
        <!-- Angel Face Markup -->
        <div class="angel-face" id="angelFace" style="
          display: inline-block;
          width: 40px;
          height: 40px;
          position: relative;
          vertical-align: middle;
          margin: 0 4px;
          border-radius: 50%;
          background: linear-gradient(145deg, #ffecd1, #ffb88c);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
          transition: all 0.3s ease;
          overflow: visible;
        ">
          <!-- Hair -->
          <div style="
            content: '';
            position: absolute;
            top: -8px;
            left: -2px;
            right: -2px;
            height: 25px;
            background: linear-gradient(145deg, #d4af37, #ffd700);
            border-radius: 50% 50% 45% 45%;
            z-index: 2;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          "></div>
          
          <!-- Halo -->
          <div style="
            content: '';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 6px;
            border: 2px solid #ffd700;
            border-radius: 50%;
            background: transparent;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
            z-index: 3;
          "></div>
          
          <!-- Left Eye -->
          <div class="left-eye" style="
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            top: 45%;
            left: 28%;
            border: 1px solid #e0e0e0;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            z-index: 1;
          ">
            <div class="left-pupil" id="leftPupil" style="
              position: absolute;
              width: 4px;
              height: 4px;
              background: #2563eb;
              border-radius: 50%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: all 0.1s ease;
              z-index: 1;
            ">
              <div style="
                content: '';
                position: absolute;
                width: 1.5px;
                height: 1.5px;
                background: white;
                border-radius: 50%;
                top: 20%;
                left: 30%;
              "></div>
            </div>
          </div>
          
          <!-- Right Eye -->
          <div class="right-eye" style="
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            top: 45%;
            left: 64%;
            border: 1px solid #e0e0e0;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            z-index: 1;
          ">
            <div class="right-pupil" id="rightPupil" style="
              position: absolute;
              width: 4px;
              height: 4px;
              background: #2563eb;
              border-radius: 50%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: all 0.1s ease;
              z-index: 1;
            ">
              <div style="
                content: '';
                position: absolute;
                width: 1.5px;
                height: 1.5px;
                background: white;
                border-radius: 50%;
                top: 20%;
                left: 30%;
              "></div>
            </div>
          </div>
          
          <!-- Nose -->
          <div class="nose" style="
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 3px;
            background: #ffb88c;
            border-radius: 0 0 50% 50%;
            z-index: 1;
          "></div>
          
          <!-- Smile -->
          <div class="smile" style="
            position: absolute;
            top: 65%;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 6px;
            border: 1.5px solid #ff6b8a;
            border-top: none;
            border-radius: 0 0 12px 12px;
            background: transparent;
            z-index: 1;
          "></div>
          
          <!-- Cheeks -->
          <div class="left-cheek" style="
            position: absolute;
            width: 6px;
            height: 4px;
            background: rgba(255, 182, 193, 0.6);
            border-radius: 50%;
            top: 58%;
            left: 15%;
            z-index: 1;
          "></div>
          <div class="right-cheek" style="
            position: absolute;
            width: 6px;
            height: 4px;
            background: rgba(255, 182, 193, 0.6);
            border-radius: 50%;
            top: 58%;
            right: 15%;
            z-index: 1;
          "></div>
        </div>
      </a>
      <!-- Eye Tracking Script -->
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          const angelFace = document.getElementById('angelFace');
          const leftPupil = document.getElementById('leftPupil');
          const rightPupil = document.getElementById('rightPupil');
          
          if (angelFace && leftPupil && rightPupil) {
            document.addEventListener('mousemove', function(e) {
              const rect = angelFace.getBoundingClientRect();
              const faceCenterX = rect.left + rect.width / 2;
              const faceCenterY = rect.top + rect.height / 2;
              
              const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
              
              const maxMovement = 1.5;
              const pupilX = Math.cos(angle) * maxMovement;
              const pupilY = Math.sin(angle) * maxMovement;
              
              leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
              rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
            });
            
            document.addEventListener('mouseleave', function() {
              leftPupil.style.transform = 'translate(-50%, -50%)';
              rightPupil.style.transform = 'translate(-50%, -50%)';
            });
          }
        });
      </script>
    </div>

    <!-- Google Ads Left Box with Images and Links -->
    <div class="ad-container left-ad" aria-label="Games links left ads box">
      <a href="..\balloonblast/balloonblast.html" rel="noopener noreferrer" aria-label="Balloon Blast Adventure Game">
        <img src="..\balloonblast/balloonblast.png" alt="Balloon Blast Adventure" width="100" height="100" />
      </a>
      <a href="..\memorychallenge/memchal.html" rel="noopener noreferrer" aria-label="Memory Challenge Game">
        <img src="..\memorychallenge/memorychallenge.png" alt="Memory Challenge" width="100" height="100" />
      </a>
      <a href="..\mergetiles/mergetiles.html" rel="noopener noreferrer" aria-label="Merge Tiles Game">
        <img src="..\mergetiles/mergetiles.png" alt="Merge Tiles" width="100" height="100" />
      </a>
      <a href="..\multihorn/multihorn.html" rel="noopener noreferrer" aria-label="Multihorn Game">
        <img src="..\multihorn/multihorn.png" alt="Multihorn" width="100" height="100" />
      </a>
      <a href="..\zenbreath/zenbreath.html" rel="noopener noreferrer" aria-label="ZenBreath Game">
        <img src="..\zenbreath/zenbreath.png" alt="ZenBreath" width="100" height="100" />
      </a>
    </div>

    <!-- Google Ads Right Box with Images and Links -->
    <div class="ad-container right-ad" aria-label="Games links right ads box">
      <a href="..\numberflow/numberflowpro.html" rel="noopener noreferrer" aria-label="NumberFlow Game">
        <img src="..\numberflow/numberflowpro.png" alt="NumberFlow Pro" width="100" height="100" />
      </a>
      <a href="..\quickmath/quickmath.html" rel="noopener noreferrer" aria-label="Quick Math Game">
        <img src="..\quickmath/quickmath.png" alt="Quick Math" width="100" height="100" />
      </a>
      <a href="..\aquarium/aquarium.html" rel="noopener noreferrer" aria-label="Aquarium Game">
        <img src="..\aquarium/aquarium.png" alt="Aquarium" width="100" height="100" />
      </a>
      <a href="..\nexusgrid/nexusgrid.html" rel="noopener noreferrer" aria-label="Nexus Grid Game">
        <img src="..\nexusgrid/nexusgrid.png" alt="Nexus Grid" width="100" height="100" />
      </a>
      <a href="..\interactivelights/interactivelights.html" rel="noopener noreferrer" aria-label="Interactive Lights Game">
        <img src="..\interactivelights/interactivelights.png" alt="Interactive Lights" width="100" height="100" />
      </a>
    </div>
    
    <!-- Removed floating particles background animation section -->

    <div class="min-h-screen">
        <!-- Header -->
        <header class="text-center py-8 px-6">
            <div class="max-w-4xl mx-auto">
                <h1 class="text-5xl font-bold gradient-text mb-2">ZenBreath</h1>
                <p class="text-xl text-gray-600 font-medium">Guided Breathing for Relaxation & Mindfulness</p>
            </div>
        </header>

        <!-- Main Content -->
        <main class="px-6 pb-12">
            <div class="max-w-6xl mx-auto">
                <!-- Settings Section -->
                <div class="mb-8">
                    <div class="settings-card max-w-2xl mx-auto">
                        <h2 class="text-2xl font-semibold gradient-text mb-6 text-center">Session Settings</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Breathing Technique</label>
                                <select id="technique" class="select-custom w-full">
                                    <option value="4-4">Equal Breathing (4-4)</option>
                                    <option value="4-7-8">Relaxing Breath (4-7-8)</option>
                                    <option value="box">Box Breathing (4-4-4-4)</option>
                                    <option value="triangle">Triangle Breathing (4-4-4)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Session Duration</label>
                                <select id="duration" class="select-custom w-full">
                                    <option value="5">5 minutes</option>
                                    <option value="10" selected>10 minutes</option>
                                    <option value="15">15 minutes</option>
                                    <option value="20">20 minutes</option>
                                </select>
                            </div>
                            <div>
                                <label for="soundToggle" class="block text-sm font-medium text-gray-700 mb-2">Background Sound</label>
                                <label class="switch" aria-label="Toggle background sound">
                                    <input type="checkbox" id="soundToggle" />
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Breathing Exercise Area -->
                <div class="glass-card rounded-3xl p-8 mb-8 max-w-4xl mx-auto">
                    <div class="text-center">
                        <!-- Phase Indicator -->
                        <div id="phaseIndicator" class="phase-indicator">Ready to Begin</div>
                        
                        <!-- Session Progress -->
                        <div class="flex justify-center items-center gap-8 mb-8">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-gray-700" id="sessionTime">10:00</div>
                                <div class="text-sm text-gray-500">Time Remaining</div>
                            </div>
                            <div class="relative">
                                <svg class="progress-ring">
                                    <circle class="progress-ring-circle"></circle>
                                    <circle id="progressCircle" class="progress-ring-progress"></circle>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-lg font-bold text-gray-700" id="cycleCount">0</div>
                                        <div class="text-xs text-gray-500">Cycles</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-gray-700" id="breathCount">0</div>
                                <div class="text-sm text-gray-500">Breaths</div>
                            </div>
                        </div>

                        <!-- Breathing Circle -->
                        <div class="mb-8">
                            <div id="breathingCircle" class="breathing-circle">
                                <div id="breathingInstruction" class="text-center">
                                    <div class="text-2xl mb-2">Get Comfortable</div>
                                    <div class="text-lg opacity-80">Click Start to Begin</div>
                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <div class="flex flex-wrap justify-center gap-4">
                            <button id="startBtn" class="btn-primary" onclick="startSession()">
                                <i class="fas fa-play"></i>
                                Start Session
                            </button>
                            <button id="pauseBtn" class="btn-secondary" onclick="togglePause()" style="display: none;">
                                <i class="fas fa-pause"></i>
                                Pause
                            </button>
                            <button id="stopBtn" class="btn-secondary" onclick="stopSession()" style="display: none;">
                                <i class="fas fa-stop"></i>
                                Stop
                            </button>
                            <button id="resetBtn" class="btn-secondary" onclick="resetSession()">
                                <i class="fas fa-redo"></i>
                                Reset
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Statistics -->
                <div class="stats-grid max-w-4xl mx-auto">
                    <div class="stat-card">
                        <div class="stat-number" id="totalSessions">0</div>
                        <div class="stat-label">Session Count</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalTime">0</div>
                        <div class="stat-label">Minutes This Session</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalBreaths">0</div>
                        <div class="stat-label">Breaths This Session</div>
                    </div>
                </div>
                
                <!-- Reset Stats Button -->
                <div class="text-center mt-4">
                    <button class="reset-stats-btn" onclick="resetSessionStats()">
                        <i class="fas fa-redo"></i>
                        Reset Session Stats
                    </button>
                </div>

                <!-- Benefits Section -->
                <div class="glass-card rounded-3xl p-8 mt-8 max-w-4xl mx-auto">
                    <h2 class="text-3xl font-semibold gradient-text mb-6 text-center">Benefits of Deep Breathing</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex items-start gap-4">
                            <div class="bg-blue-100 p-3 rounded-full">
                                <i class="fas fa-brain text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800 mb-2">Reduces Stress &amp; Anxiety</h3>
                                <p class="text-gray-600 text-sm">Activates the body's relaxation response and lowers cortisol levels.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="bg-green-100 p-3 rounded-full">
                                <i class="fas fa-heart text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800 mb-2">Improves Focus</h3>
                                <p class="text-gray-600 text-sm">Increases oxygen flow to the brain, enhancing concentration and clarity.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="bg-purple-100 p-3 rounded-full">
                                <i class="fas fa-moon text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800 mb-2">Better Sleep</h3>
                                <p class="text-gray-600 text-sm">Calms the nervous system and prepares the body for restful sleep.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="bg-red-100 p-3 rounded-full">
                                <i class="fas fa-heartbeat text-red-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800 mb-2">Lowers Blood Pressure</h3>
                                <p class="text-gray-600 text-sm">Promotes cardiovascular health through regulated breathing patterns.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Audio Element for Background Sound -->
    <audio id="backgroundSound" src="ocean-waves.mp3" loop preload="auto" volume="0.15"></audio>

    <!-- JavaScript for breathing app -->
    <script>
        // Breathing Exercise State
        let breathingState = {
            isActive: false,
            isPaused: false,
            currentPhase: 'ready',
            cycleCount: 0,
            breathCount: 0,
            sessionTimeRemaining: 0,
            sessionDurationSeconds: 600, // 10 minutes default
            technique: '4-4',
            phaseTimer: null,
            sessionTimer: null,
            currentPhaseIndex: 0,
            sessionStats: { // Session-only tracking (no localStorage)
                sessionCount: 0,
                sessionMinutes: 0,
                sessionBreaths: 0
            },
            soundEnabled: false
        };

        const techniques = {
            '4-4': {
                name: 'Equal Breathing',
                phases: [
                    { name: 'Inhale', duration: 4, class: 'inhale', instruction: 'Breathe In Slowly' },
                    { name: 'Exhale', duration: 4, class: 'exhale', instruction: 'Breathe Out Gently' }
                ]
            },
            '4-7-8': {
                name: 'Relaxing Breath',
                phases: [
                    { name: 'Inhale', duration: 4, class: 'inhale', instruction: 'Inhale Through Nose' },
                    { name: 'Hold', duration: 7, class: 'hold', instruction: 'Hold Your Breath' },
                    { name: 'Exhale', duration: 8, class: 'exhale', instruction: 'Exhale Completely' }
                ]
            },
            'box': {
                name: 'Box Breathing',
                phases: [
                    { name: 'Inhale', duration: 4, class: 'inhale', instruction: 'Breathe In' },
                    { name: 'Hold', duration: 4, class: 'hold', instruction: 'Hold' },
                    { name: 'Exhale', duration: 4, class: 'exhale', instruction: 'Breathe Out' },
                    { name: 'Hold', duration: 4, class: 'hold', instruction: 'Hold Empty' }
                ]
            },
            'triangle': {
                name: 'Triangle Breathing',
                phases: [
                    { name: 'Inhale', duration: 4, class: 'inhale', instruction: 'Inhale Deeply' },
                    { name: 'Hold', duration: 4, class: 'hold', instruction: 'Hold Breath' },
                    { name: 'Exhale', duration: 4, class: 'exhale', instruction: 'Exhale Slowly' }
                ]
            }
        };

        const elements = {
            breathingCircle: document.getElementById('breathingCircle'),
            breathingInstruction: document.getElementById('breathingInstruction'),
            phaseIndicator: document.getElementById('phaseIndicator'),
            sessionTime: document.getElementById('sessionTime'),
            cycleCount: document.getElementById('cycleCount'),
            breathCount: document.getElementById('breathCount'),
            progressCircle: document.getElementById('progressCircle'),
            startBtn: document.getElementById('startBtn'),
            pauseBtn: document.getElementById('pauseBtn'),
            stopBtn: document.getElementById('stopBtn'),
            resetBtn: document.getElementById('resetBtn'),
            technique: document.getElementById('technique'),
            duration: document.getElementById('duration'),
            soundToggle: document.getElementById('soundToggle'),
            totalSessions: document.getElementById('totalSessions'),
            totalTime: document.getElementById('totalTime'),
            totalBreaths: document.getElementById('totalBreaths'),
            backgroundSound: document.getElementById('backgroundSound')
        };

        function init() {
            updateDisplay();
            elements.technique.addEventListener('change', updateTechnique);
            elements.duration.addEventListener('change', updateDuration);
            elements.soundToggle.addEventListener('change', toggleSound);
        }

        function updateTechnique() {
            breathingState.technique = elements.technique.value;
            if (breathingState.isActive) {
                stopSession();
            }
            resetSession();
        }

        function updateDuration() {
            const minutes = parseInt(elements.duration.value);
            breathingState.sessionDurationSeconds = minutes * 60;
            breathingState.sessionTimeRemaining = breathingState.sessionDurationSeconds;
            updateTimeDisplay();
        }

        function toggleSound() {
            breathingState.soundEnabled = elements.soundToggle.checked;
            if (breathingState.soundEnabled) {
                if (breathingState.isActive && !breathingState.isPaused) {
                    playBackgroundSound();
                }
            } else {
                pauseBackgroundSound();
            }
        }

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }

        function updateTimeDisplay() {
            elements.sessionTime.textContent = formatTime(breathingState.sessionTimeRemaining);
        }

        function updateProgressCircle() {
            const totalSeconds = breathingState.sessionDurationSeconds;
            const remaining = breathingState.sessionTimeRemaining;
            const progress = ((totalSeconds - remaining) / totalSeconds) * 100;
            const circumference = 326.73;
            const offset = circumference - (progress / 100) * circumference;
            elements.progressCircle.style.strokeDashoffset = offset;
        }

        function updateDisplay() {
            updateTimeDisplay();
            updateProgressCircle();
            elements.cycleCount.textContent = breathingState.cycleCount;
            elements.breathCount.textContent = breathingState.breathCount;
            elements.totalSessions.textContent = breathingState.sessionStats.sessionCount;
            elements.totalTime.textContent = Math.floor((breathingState.sessionDurationSeconds - breathingState.sessionTimeRemaining) / 60);
            elements.totalBreaths.textContent = breathingState.sessionStats.sessionBreaths;
            elements.soundToggle.checked = breathingState.soundEnabled;
        }

        function resetSessionStats() {
            breathingState.sessionStats = {
                sessionCount: 0,
                sessionMinutes: 0,
                sessionBreaths: 0
            };
            updateDisplay();
        }

        // Audio Control Functions
        function playBackgroundSound() {
            if (!breathingState.soundEnabled) return;
            elements.backgroundSound.volume = 0.15;
            const playPromise = elements.backgroundSound.play();
            if (playPromise !== undefined) {
                playPromise.catch(() => {}); // Avoid unhandled promise rejection on some browsers
            }
        }

        function pauseBackgroundSound() {
            elements.backgroundSound.pause();
        }

        function stopBackgroundSound() {
            pauseBackgroundSound();
            elements.backgroundSound.currentTime = 0;
        }

        function startSession() {
            if (breathingState.isPaused) {
                resumeSession();
                return;
            }

            breathingState.isActive = true;
            breathingState.isPaused = false;
            breathingState.sessionTimeRemaining = breathingState.sessionDurationSeconds;
            breathingState.cycleCount = 0;
            breathingState.breathCount = 0;
            breathingState.currentPhaseIndex = 0;
            breathingState.sessionStats.sessionCount++;

            elements.startBtn.style.display = 'none';
            elements.pauseBtn.style.display = 'inline-flex';
            elements.stopBtn.style.display = 'inline-flex';

            if (breathingState.soundEnabled) {
                playBackgroundSound();
            }

            startSessionTimer();
            startBreathingCycle();
        }

        function togglePause() {
            if (breathingState.isPaused) {
                resumeSession();
            } else {
                pauseSession();
            }
        }

        function pauseSession() {
            breathingState.isPaused = true;
            
            if (breathingState.phaseTimer) {
                clearTimeout(breathingState.phaseTimer);
            }
            if (breathingState.sessionTimer) {
                clearInterval(breathingState.sessionTimer);
            }

            if (breathingState.soundEnabled) {
                pauseBackgroundSound();
            }

            elements.pauseBtn.innerHTML = '<i class="fas fa-play"></i> Resume';
            elements.phaseIndicator.textContent = 'Paused';
            elements.breathingInstruction.innerHTML = '<div class="text-2xl mb-2">Session Paused</div><div class="text-lg opacity-80">Click Resume to Continue</div>';
            
            elements.breathingCircle.className = 'breathing-circle';
        }

        function resumeSession() {
            breathingState.isPaused = false;
            
            elements.pauseBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';

            if (breathingState.soundEnabled) {
                playBackgroundSound();
            }
            
            startSessionTimer();
            continueBreathingCycle();
        }

        function stopSession() {
            if (breathingState.phaseTimer) clearTimeout(breathingState.phaseTimer);
            if (breathingState.sessionTimer) clearInterval(breathingState.sessionTimer);

            breathingState.sessionStats.sessionMinutes += Math.floor(
                (breathingState.sessionDurationSeconds - breathingState.sessionTimeRemaining) / 60
            );
            breathingState.sessionStats.sessionBreaths += breathingState.breathCount;

            breathingState.isActive = false;
            breathingState.isPaused = false;

            elements.startBtn.style.display = 'inline-flex';
            elements.pauseBtn.style.display = 'none';
            elements.stopBtn.style.display = 'none';

            if (breathingState.soundEnabled) {
                stopBackgroundSound();
            }

            showCompletionMessage();
            resetSession();
        }

        function showCompletionMessage() {
            elements.phaseIndicator.textContent = 'Session Complete!';
            elements.breathingInstruction.innerHTML = '<div class="text-2xl mb-2">Well Done!</div>';

            setTimeout(() => {
                if (!breathingState.isActive) {
                    elements.phaseIndicator.textContent = 'Ready to Begin';
                    elements.breathingInstruction.innerHTML = '<div class="text-2xl mb-2">Get Comfortable</div><div class="text-lg opacity-80">Click Start to Begin</div>';
                }
            }, 3000);
        }

        function resetSession() {
            if (breathingState.phaseTimer) clearTimeout(breathingState.phaseTimer);
            if (breathingState.sessionTimer) clearInterval(breathingState.sessionTimer);

            breathingState.isActive = false;
            breathingState.isPaused = false;
            breathingState.currentPhase = 'ready';
            breathingState.cycleCount = 0;
            breathingState.breathCount = 0;
            breathingState.currentPhaseIndex = 0;

            const minutes = parseInt(elements.duration.value);
            breathingState.sessionDurationSeconds = minutes * 60;
            breathingState.sessionTimeRemaining = breathingState.sessionDurationSeconds;

            elements.startBtn.style.display = 'inline-flex';
            elements.pauseBtn.style.display = 'none';
            elements.stopBtn.style.display = 'none';
            elements.pauseBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';

            // Stop sound if playing
            if (breathingState.soundEnabled) {
                pauseBackgroundSound();
            }

            elements.phaseIndicator.textContent = 'Ready to Begin';
            elements.breathingInstruction.innerHTML = '<div class="text-2xl mb-2">Get Comfortable</div><div class="text-lg opacity-80">Click Start to Begin</div>';
            elements.breathingCircle.className = 'breathing-circle';

            updateDisplay();
        }

        function startSessionTimer() {
            breathingState.sessionTimer = setInterval(() => {
                if (!breathingState.isPaused && breathingState.sessionTimeRemaining > 0) {
                    breathingState.sessionTimeRemaining--;
                    updateDisplay();
                    
                    if (breathingState.sessionTimeRemaining <= 0) {
                        stopSession();
                    }
                }
            }, 1000);
        }

        function startBreathingCycle() {
            if (!breathingState.isActive || breathingState.isPaused) return;
            
            const technique = techniques[breathingState.technique];
            breathingState.currentPhaseIndex = 0;
            executePhase(technique.phases[0], technique);
        }

        function continueBreathingCycle() {
            if (!breathingState.isActive || breathingState.isPaused) return;
            
            const technique = techniques[breathingState.technique];
            const currentPhase = technique.phases[breathingState.currentPhaseIndex];
            executePhase(currentPhase, technique);
        }

        function executePhase(phase, technique) {
            if (!breathingState.isActive || breathingState.isPaused) return;

            elements.phaseIndicator.textContent = phase.name;
            elements.breathingInstruction.innerHTML = `<div class="text-2xl mb-2">${phase.instruction}</div><div class="text-lg opacity-80">${phase.duration} seconds</div>`;
            
            elements.breathingCircle.className = `breathing-circle ${phase.class}`;
            
            if (phase.name === 'Exhale') {
                breathingState.breathCount++;
                breathingState.sessionStats.sessionBreaths++;
                updateDisplay();
            }

            breathingState.phaseTimer = setTimeout(() => {
                if (!breathingState.isActive || breathingState.isPaused) return;
                
                breathingState.currentPhaseIndex++;
                
                if (breathingState.currentPhaseIndex >= technique.phases.length) {
                    breathingState.currentPhaseIndex = 0;
                    breathingState.cycleCount++;
                    updateDisplay();
                }
                
                const nextPhase = technique.phases[breathingState.currentPhaseIndex];
                executePhase(nextPhase, technique);
                
            }, phase.duration * 1000);
        }

        // Handle page visibility to pause/resume background sound and breathing session
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                if (breathingState.isActive && !breathingState.isPaused) {
                    pauseSession();
                }

                if (breathingState.soundEnabled) {
                    pauseBackgroundSound();
                }
            } else {
                if (breathingState.isActive && breathingState.isPaused) {
                    // Do not auto resume breathing session (user controls that)
                }
                if (breathingState.soundEnabled && breathingState.isActive && !breathingState.isPaused) {
                    playBackgroundSound();
                }
            }
        });

        window.startSession = startSession;
        window.togglePause = togglePause;
        window.stopSession = stopSession;
        window.resetSession = resetSession;
        window.resetSessionStats = resetSessionStats;

        document.addEventListener('DOMContentLoaded', init);

        document.addEventListener('keydown', function(e) {
            switch(e.code) {
                case 'Space':
                    e.preventDefault();
                    if (breathingState.isActive) {
                        togglePause();
                    } else {
                        startSession();
                    }
                    break;
                case 'Escape':
                    if (breathingState.isActive) {
                        stopSession();
                    }
                    break;
                case 'KeyR':
                    if (e.ctrlKey || e.metaKey) {
                        e.preventDefault();
                        resetSession();
                    }
                    break;
            }
        });
    </script>
</body>
</html>